<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script><style>
@keyframes test {
    from { opacity: 0; }
    to { opacity: 1; }
}
.cssAnimation {
    animation: test 2s;
}
</style>
<div id='container'>
    <div id='element'></div>
</div>

<script>
async_test(function(t) {
    assert_equals(document.getAnimations().length, 0);
    assert_equals(container.getAnimations().length, 0);
    assert_equals(element.getAnimations().length, 0);

    element.className = 'cssAnimation';
    onload = function () {
        t.step(function() {
            var animations = document.getAnimations();
            assert_equals(animations.length, 1);
            assert_equals(container.getAnimations().length, 0);
            assert_equals(element.getAnimations().length, 1);

            animations[0].finish();
            assert_equals(document.getAnimations().length, 0);
            assert_equals(container.getAnimations().length, 0);
            assert_equals(element.getAnimations().length, 0);
            t.done();
        });
    }
}, 'getAnimations() with cssanimations');

</script>
